<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>待办事项列表</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: 'Microsoft YaHei', sans-serif;
      background: linear-gradient(135deg, #F5F5F5 0%, #E8E8E8 100%);
      min-height: 100vh;
      padding: 40px 20px;
    }

    .container {
      max-width: 800px;
      margin: 0 auto;
      background: white;
      padding: 30px;
      border-radius: 15px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    }

    h1 {
      color: #4169E1;
      text-align: center;
      margin-bottom: 30px;
      font-size: 32px;
    }

    .add-container {
      display: flex;
      gap: 10px;
      margin-bottom: 30px;
      align-items: center;
    }

    input[type="text"] {
      flex: 1;
      padding: 12px 15px;
      border: 2px solid #e1e1e1;
      border-radius: 8px;
      font-size: 14px;
      transition: all 0.3s ease;
    }

    input[type="text"]:focus {
      border-color: #6495ED;
      outline: none;
      box-shadow: 0 0 0 3px rgba(100, 149, 237, 0.1);
    }

    .icon-btn {
      padding: 8px;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      font-size: 16px;
      width: 35px;
      height: 35px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      margin: 0 5px;
      color: white;
    }

    .icon-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    .icon-btn.add {
      background: #6495ED;
    }

    .icon-btn.edit {
      background: #6495ED;
    }

    .icon-btn.delete {
      background: #DC143C;
    }

    .icon-btn.delete-all {
      background: #DC143C;
      border-radius: 8px;
      padding: 8px 15px;
      width: auto;
      height: auto;
    }

    .todo-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 15px;
      background: white;
      border-radius: 8px;
      margin-bottom: 10px;
      transition: all 0.3s ease;
      border: 1px solid #E8E8E8;
    }

    .todo-item:hover {
      transform: translateX(5px);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .todo-item input[type="text"] {
      flex: 1;
      margin: 0;
      background-color: white;
      border: 1px solid #E8E8E8;
    }

    .todo-item .actions {
      display: flex;
      gap: 5px;
    }

    @media (max-width: 600px) {
      .container {
        padding: 20px;
      }

      .add-container {
        flex-direction: column;
      }

      .todo-item {
        flex-wrap: wrap;
      }

      .todo-item input[type="text"] {
        width: 100%;
        margin-bottom: 10px;
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <h1>待办事项列表</h1>
    <div class="add-container">
      <input type="text" id="newTodo" placeholder="输入新的待办事项">
      <button class="icon-btn add" onclick="addTodo()" title="添加">
        <i class="fas fa-plus"></i>
      </button>
      <button class="icon-btn delete-all" onclick="deleteAll()" title="删除全部">
        <i class="fas fa-trash-alt"></i> 删除全部
      </button>
    </div>
    <div id="todoList" class="todo-container">
      <!-- 待办事项将在这里动态插入 -->
    </div>
  </div>

  <script>
    // 检查是否已登录
    const token = localStorage.getItem('token');
    if (!token) {
      window.location.href = 'login.html';
    }

    // 获取待办事项列表
    async function getTodos() {
      try {
        const response = await fetch('http://localhost:8080/api/todos', {
          headers: {
            'Authorization': `Bearer ${token}`
          }
        });
        if (response.ok) {
          const todos = await response.json();
          displayTodos(todos);
        } else {
          alert('获取待办事项失败');
        }
      } catch (error) {
        console.error('Error:', error);
        alert('获取待办事项失败');
      }
    }

    // 显示待办事项
    function displayTodos(todos) {
      const todoList = document.getElementById('todoList');
      todoList.innerHTML = '';
      todos.forEach(todo => {
        const div = document.createElement('div');
        div.className = 'todo-item';
        div.innerHTML = `
                <input type="text" value="${todo.content}" readonly>
                <div class="actions">
                    <button class="icon-btn edit" onclick="editTodo(this, ${todo.id})" title="修改">
                        <i class="fas fa-edit"></i>
                    </button>
                    <button class="icon-btn delete" onclick="deleteTodo(${todo.id})" title="删除">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
            `;
        todoList.appendChild(div);
      });
    }

    // 添加编辑功能
    function editTodo(btn, id) {
      const todoItem = btn.closest('.todo-item');
      const input = todoItem.querySelector('input');
      const icon = btn.querySelector('i');

      if (input.readOnly) {
        // 进入编辑模式
        input.readOnly = false;
        input.focus();
        icon.className = 'fas fa-save';
        btn.title = '保存';
        input.style.backgroundColor = '#fff';
        input.style.border = '1px solid #6495ED';
      } else {
        // 保存修改
        const newContent = input.value.trim();
        if (newContent) {
          updateTodo(id, newContent);
          input.readOnly = true;
          icon.className = 'fas fa-edit';
          btn.title = '修改';
          input.style.backgroundColor = '';
          input.style.border = '';
        } else {
          alert('内容不能为空！');
        }
      }
    }

    // 更新待办事项
    async function updateTodo(id, content) {
      try {
        const response = await fetch(`http://localhost:8080/api/todos/${id}`, {
          method: 'PUT',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${token}`
          },
          body: JSON.stringify({ content })
        });

        if (!response.ok) {
          alert('更新待办事项失败');
          getTodos(); // 刷新列表
        }
      } catch (error) {
        console.error('Error:', error);
        alert('更新待办事项失败');
        getTodos(); // 刷新列表
      }
    }

    // 添加待办事项
    async function addTodo() {
      const input = document.getElementById('newTodo');
      const content = input.value.trim();
      if (!content) return;

      try {
        const response = await fetch('http://localhost:8080/api/todos', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${token}`
          },
          body: JSON.stringify({ content })
        });

        if (response.ok) {
          input.value = '';
          getTodos();
        } else {
          alert('添加待办事项失败');
        }
      } catch (error) {
        console.error('Error:', error);
        alert('添加待办事项失败');
      }
    }

    // 删除待办事项
    async function deleteTodo(id) {
      try {
        const response = await fetch(`http://localhost:8080/api/todos/${id}`, {
          method: 'DELETE',
          headers: {
            'Authorization': `Bearer ${token}`
          }
        });

        if (response.ok) {
          getTodos();
        } else {
          alert('删除待办事项失败');
        }
      } catch (error) {
        console.error('Error:', error);
        alert('删除待办事项失败');
      }
    }

    // 删除所有待办事项
    async function deleteAll() {
      if (!confirm('确定要删除所有待办事项吗？')) return;

      try {
        const response = await fetch('http://localhost:8080/api/todos', {
          method: 'DELETE',
          headers: {
            'Authorization': `Bearer ${token}`
          }
        });

        if (response.ok) {
          getTodos();
        } else {
          alert('删除所有待办事项失败');
        }
      } catch (error) {
        console.error('Error:', error);
        alert('删除所有待办事项失败');
      }
    }

    // 页面加载时获取待办事项
    getTodos();
  </script>
</body>

</html>